<template>
    <div class="tenant-data">
        <el-row>
            <el-col :span="4">
                <RouterLink to="/tenant/myhouse">
                    <el-button type="primary">我的租用</el-button>
                </RouterLink>
            </el-col>
            <el-col :span="4">
                <el-text size="large" tag="b">{{ totalHouse.title }} : {{ totalHouse.num }}</el-text>
            </el-col>
        </el-row>
        <br>

        <el-text size="large" tag="b">按房屋类型</el-text>
        <el-row>
            <el-col :span="4" v-for="item in houseTypeData" :key="item.title">
                <el-statistic :title="item.title" :value="item.num"></el-statistic>
            </el-col>
        </el-row>

        <br><el-text size="large" tag="b">按房屋状态</el-text><br>
        <el-row>
            <el-col :span="4" v-for="item in houseStatusData" :key="item.title">
                <el-statistic :title="item.title" :value="item.num"></el-statistic>
            </el-col>
        </el-row>

    </div>
    <el-divider border-style="dashed" />
    <div class="workorder-data">
        <el-row>
            <el-col :span="4">
                <RouterLink to="/tenant/myworkorder">
                    <el-button type="primary">我的工单</el-button>
                </RouterLink>
            </el-col>
            <el-col :span="4">
                <el-text size="large" tag="b">{{ totalWorkOrder.title }} : {{ totalWorkOrder.num }}</el-text>
            </el-col>
        </el-row>
        <br>
        <el-text size="large" tag="b">按工单状态</el-text>
        <el-row>
            <el-col :span="4" v-for="item in workorderStatusData" :key="item.title">
                <el-statistic :title="item.title" :value="item.num"></el-statistic>
            </el-col>
        </el-row>

        <br><el-text size="large" tag="b">按工单分类</el-text><br>
        <el-row>
            <el-col :span="4" v-for="item in workorderCategoryData" :key="item.title">
                <el-statistic :title="item.title" :value="item.num"></el-statistic>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus'
import { RouterLink, useRouter } from "vue-router";
const router = useRouter();

import { useUserInfoStore } from '@/stores/userInfo.js';
const userInfoStore = useUserInfoStore();
const userInfo = userInfoStore.userInfo;

import { tenantGetStatService } from '@/api/user.js'

// 总响应数据
// const resultData = ref({})
// 存放查得数据的响应式对象
let houseTypeData = ref([{ title: '', num: 0 }])
let houseStatusData = ref([{ title: '', num: 0 }])
let workorderCategoryData = ref([{ title: '', num: 0 }])
let workorderStatusData = ref([{ title: '', num: 0 }])
let totalHouse = ref({ title: '', num: 0 })
let totalWorkOrder = ref({ title: '', num: 0 })

// 获取该租户的统计数据
const getTenantStat = async function () {
    try {
        let result = await tenantGetStatService(userInfo.id)
        if (result.code == 200) {
            houseTypeData.value = result.data['byHouseType'];
            houseStatusData.value = result.data['byHouseStatus'];
            workorderCategoryData.value = result.data['byWorkOrderCategory'];
            workorderStatusData.value = result.data['byWorkOrderCompleteStatus'];
            totalHouse.value = result.data['totalHouse'][0];
            totalWorkOrder.value = result.data['totalWorkOrder'][0];
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
        else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 （getTenantStat）')
    }
}
getTenantStat()

</script>